<template>
  <el-tabs v-model="tabsAction">
    <el-tab-pane
      v-for="(item, index) in list"
      :key="index"
      v-loading="loading"
      :name="item.tab_name"
      :label="item.title"
    >
      <div class="app-container">
        <el-form ref="userFormRef" label-position="right" label-width="auto">
          <el-form-item
            v-for="(row, key) in item.data"
            :key="row.name"
            :label="row.title"
          >
            <span
              v-if="row.description !== '' && row.type != 'image'"
              style="font-size: 14px; color: #c8c9cc"
              >({{ row.description }})</span
            >
            <el-input
              v-if="row.type === 'text'"
              v-model="row.value"
              placeholder="请输入内容"
              :name="row.name"
            />
            <el-input
              v-if="row.type === 'textarea'"
              v-model="row.value"
              placeholder="请输入内容"
              type="textarea"
            />
            <el-radio-group v-if="row.type === 'radio'" v-model="row.value">
              <el-radio
                v-for="options in row.options"
                :key="options.value"
                :label="options.value"
                >{{ options.key }}</el-radio
              >
            </el-radio-group>
            <el-upload
              v-if="row.type === 'image'"
              class="avatar-uploader"
              :action="uploadUrl"
              :show-file-list="false"
              :data="{ index: index, key: key }"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :headers="headers"
            >
              <img v-if="row.value" :src="row.value" class="avatar" alt="" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
            <span
              v-if="row.description !== '' && row.type == 'image'"
              style="font-size: 14px; color: #c8c9cc; margin-left: 10px"
              >({{ row.description }})</span
            >
          </el-form-item>
          <el-form-item style="text-align: center">
            <el-button
              v-hasPerm="['config@save']"
              type="primary"
              @click="handleSubmit"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import { Plus } from "@element-plus/icons-vue";

defineOptions({
  name: "ConfigSet",
  inheritAttrs: false,
});
import type { UploadProps } from "element-plus";
import { fetchList, save } from "@/api/config";
import { configGroup, configQuery } from "@/api/config/types";
import { ElLoading } from "element-plus";
const tabsAction = ref("base");
const loading = ref(false);
const list = ref<configGroup[]>();
const userFormRef = ref(ElForm); // 用户表单
const queryParams = reactive<configQuery>(<configQuery>{});
const uploadUrl = ref(
  import.meta.env.VITE_APP_API_URL + "/admin/config/upload"
);
const headers = ref({
  Authorization: localStorage.getItem("accessToken"),
});

const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  list.value[response.data.index].data[response.data.key].value =
    response.data.url;
};
const imageType = ["image/jpeg", "image/png", "image/jpg"];

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (!imageType.includes(rawFile.type)) {
    ElMessage.error("图片格式不正确");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("图片大小不超过 2MB!");
    return false;
  }
  return true;
};

function handleQuery() {
  loading.value = true;
  fetchList(queryParams)
    .then(({ data }) => {
      list.value = data;
    })
    .finally(() => {
      loading.value = false;
    });
}

function handleSubmit() {
  const loading = ElLoading.service({
    lock: true,
    text: "提交中...",
    background: "rgba(0, 0, 0, 0.7)",
  });
  save(list.value)
    .then(() => {
      ElMessage.success("保存成功");
    })
    .finally(() => loading.close());
}

onMounted(() => {
  handleQuery();
});
</script>

<style>
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 80px;
  height: 80px;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
</style>
